#file-input {
  display: none;
}

.drag-container {
  width: 300px;
  height: 300px;
  margin: 200px auto;
  border-radius: 10px;
  box-shadow: 1px 1px 3px 1px #00000050;
  background-color: #c5c5c5;
}

.add-icon-container, .uploaded-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}

.uploaded-icon-container {
  text-align: center;
}

.icon-box {
  margin: 70px 0 20px 0;
}

.uploaded-icon {
  margin: 60px 0 10px 0;
}

.add-icon-container svg,
.uploaded-icon svg {
  width: 100px;
  height: 100px;
  fill: currentColor;
}

.tip-box {
  color: currentColor;
}

.upload-progress-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #fff;

  &.uploading {
    .start {
      display: none;
    }
    .pause {
      display: block;
    }
    .progress-light {
      animation: rightMove 1.5s linear infinite;
    }
  }
  .progress-number, .wait-server {
    margin-top: 6px;
  }
  .wait-server {
    display: none;
  }
  .wait-minute-tip {
    font-size: 14px;
  }
  &.wait-merge .wait-server {
    display: block;
    text-align: center;
  }
  &.wait-merge .progress-number {
    display: none;
  }
  &.wait-merge .upload-tools {
    display: none;
  }
}

.progress-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 60px;
}

.upload-tools {
  display: flex;
  align-items: center;
  height: 60px;

  .pause {
    display: none;
  }

  .cancel {
    margin-left: 20px;
  }
}

.progress-track,
.progress-thumb {
  width: 200px;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}

.progress-thumb {
  position: relative;
  background-color: #32aefa;
  transform: translateX(-100%);

  .progress-light {
    position: absolute;
    width: 100px;
    height: 20px;
    opacity: .5;
    transform: translate(-60%) rotate(60deg);
    background-color: #fff;
  }
}

.progress-track {
  background-color: #efefef;
}

@keyframes rightMove {
  to {
    transform: translate(170%) rotate(60deg);
  }
}

.upload-tool {
  border-radius: 6px;
  svg {
    width: 27px;
    height: 27px;
  }
  &:hover {
    background-color: #bdbdbd;
  }
}

.upload-tool,
.upload-again-icon-container {
  svg {
    padding: 3px;
    border-radius: 6px;
    fill: currentColor;
  }
}

.upload-again-container {
  padding: 4px 12px;
  border-radius: 4px;
  margin-top: 20px;
  background-color: #e75f5f;
  &:hover {
    background-color: #dc5d5d;
  }
}

.upload-again-icon-container svg {
  width: 20px;
  height: 20px;
  margin-left: 4px;
  vertical-align: -7px;
}

